.nom-select {
  &.p-label-align-right > .nom-field-label + .nom-field-content {
    width: 0;
  }

  > .nom-field-content {
    .nom-control {
      position: relative;
      min-height: @input-height-base-treeSelect;
      padding: @padding-y-base 24px @padding-y-base 12px;
      color: var(--nom-input-color);
      line-height: @line-height-computed;
      background: var(--nom-input-bg);
      border: 1px solid var(--nom-border-color);
      border-radius: var(--nom-border-radius);
      cursor: pointer;
      transition: all 0.3s;

      &:not(.s-disabled):hover {
        border-color: var(--nom-color-primary);
      }

      .nom-select-single {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .nom-select-multiple {
        .nom-list-item {
          display: flex;
          align-items: center;
          padding: var(--nom-select-selected-item-padding);
          background: var(--nom-select-selected-item-bg);
          border: 1px solid var(--nom-select-selected-item-border-color);
          border-radius: var(--nom-border-radius);
          cursor: default;
          &.nom-select-overtag-trigger {
            border: none;
            background: transparent;
          }

          .nom-select-item-content {
            max-width: 20rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 4px;
          }

          .nom-icon {
            font-size: 8px;
          }
        }
      }

      .nom-select-search-input {
        width: 100%;
        border: none;
        outline: none;
      }

      .nom-select-arrow {
        position: absolute;
        top: 0;
        right: 8px;
        bottom: 0;
      }

      .nom-select-clear {
        position: absolute;
        top: 0;
        right: 8px;
        bottom: 0;
        background: var(--nom-input-bg);
        cursor: pointer;
      }

      .s-disabled& .nom-select-clear {
        visibility: hidden;
      }

      .nom-select-placeholder {
        overflow: hidden;
        color: var(--nom-color-text-2);
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .s-disabled& {
        background-color: var(--nom-input-bg-disabled);
        cursor: not-allowed !important;
        opacity: 1;
      }
    }
  }
}

.nom-select-extra-tags {
  max-width: 50vw;
  padding: 0.5rem;
  .nom-list-item {
    display: flex;
    align-items: center;
    padding: var(--nom-select-selected-item-padding);
    background: var(--nom-select-selected-item-bg);
    border: 1px solid var(--nom-select-selected-item-border-color);
    border-radius: var(--nom-border-radius);
    cursor: default;

    .nom-select-item-content {
      max-width: 20rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 4px;
    }

    .nom-icon {
      font-size: 8px;
    }
  }
}

.nom-select-popup > .nom-layout {
  max-height: 300px;

  > .nom-layout-body {
    overflow-x: hidden;
  }
}

.nom-select-list {
  .nom-list-item {
    padding: 5px 16px;
    user-select: none;

    &:hover {
      .nom-preset-hover;
    }

    &.s-selected {
      .nom-preset-primary;
    }

    &.s-disabled:hover {
      cursor: not-allowed;
    }
  }
}

.nom-select-checker {
  .nom-list-item {
    position: relative;
    padding: 5px 30px;

    &:hover {
      .nom-preset-hover;
    }

    &.nom-selected::before {
      position: absolute;
      top: 50%;
      left: 16px;
      z-index: 2;
      color: var(--nom-color-primary);
      font-weight: bold;
      font-size: 16px;
      font-family: nom-icon;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      content: '\E632';
    }
  }
}

.nom-select-animate-top-show {
  -webkit-animation: nom-select-keyframe-top-show 0.16s linear forwards;
  animation: nom-select-keyframe-top-show 0.16s linear forwards;
}

.nom-select-animate-bottom-show {
  -webkit-animation: nom-select-keyframe-bottom-show 0.16s linear forwards;
  animation: nom-select-keyframe-bottom-show 0.16s linear forwards;
}

.nom-select-animate-top-hide {
  -webkit-animation: nom-select-keyframe-top-hide 0.16s linear forwards;
  animation: nom-select-keyframe-top-hide 0.16s linear forwards;
}

.nom-select-animate-bottom-hide {
  -webkit-animation: nom-select-keyframe-bottom-hide 0.16s linear forwards;
  animation: nom-select-keyframe-bottom-hide 0.16s linear forwards;
}

@-webkit-keyframes nom-select-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes nom-select-keyframe-top-show {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-select-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes nom-select-keyframe-bottom-show {
  0% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }
}

@-webkit-keyframes nom-select-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@keyframes nom-select-keyframe-top-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
  }
}

@-webkit-keyframes nom-select-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}

@keyframes nom-select-keyframe-bottom-hide {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
    opacity: 0;
  }
}
